<template>
  <div class="paramsInfo" v-if="Object.keys(paramsInfo).length !==0 ">
    <table>
      <tr v-for="(item1,index) in paramsInfo.sizes[0]" :key="index">
        <td v-for="(item2,index) in item1" :key="index">{{item2}}</td>
      </tr>
    </table>
    <table class="info-params">
      <tr v-for="(info,index) in paramsInfo.info" :key="index">
        <td class="info-params-key">{{info.key}}</td>
        <td class="info-params-value">{{info.value}}</td>
      </tr>
    </table>
    <div class="info-img" v-if="paramsInfo.image.length !== 0">
          <img :src="paramsInfo.image" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name:"paramsInfo",
    props:{
      paramsInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .paramsInfo {
      padding: 20px 15px;
      font-size: 14px;
      border-bottom: 5px solid #f2f5f8;
    }
  table{
    width:100%;
    border-collapse:collapse;

  }
  table tr{
    height:42px;
  }
  table tr td{
    border-bottom:1px solid rgba(0,0,0,.1)
  }
  .info-params-key{
    width:90px;
  }
  .info-params-value{
    color: #eb4868
  }
  .info-img img {
      width: 100%;
    }
</style>
